<!-- 基桩工程检测管理--按建设项目统计 -->
<template>
    <div class="department">
        <!-- 右侧 -->
        <div class="department_right">
            <!-- 部门信息 -->
            <div class="department_right_name">
                <div>基桩检测统计</div>
            </div>

            <!-- 顶部导航栏 -->
            <div class="mechanism_nav">
                <!-- 左侧 -->
                <div class="mechanism_nav_left">
                    <div class="selectBox">
                        <span class="nameBox">项目名称：</span>
                        <el-select @change="function (v) {
                            return selectCompany(v);
                        }
                            " v-model="companyName" placeholder="请选择项目">
                            <el-option v-for="v in companyList" :key="v.F_ProjectName" :label="v.F_ProjectName" :value="v">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="selectBox">
                        <span class="nameBox">检测状态：</span>
                        <el-select @change="function (v) {
                            return selectJudgetype(v);
                        }
                            " v-model="getList.keyWord" placeholder="选择检测状态">
                            <el-option v-for="v in Checktype" :key="v.fItemName" :label="v.fItemName" :value="v">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="print">
                    <div class="printTable">
                        <el-button type="primary" icon="el-icon-refresh" size="small" @click="getDataList(getList)">
                        </el-button>
                    </div>
                </div>
            </div>

            <!-- 表格 -->
            <div class="text_table">
                <el-table ref="multipleTableA" v-loading="loading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
                    :data="tableData" style="width: 100%" height="100%" stripe border highlight-current-row
                    @current-change="rowChange">
                    <el-table-column fixed type="index" label="序号" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="F_Status" label="检测状态" align="center" width="80">
                        <!-- 超出鼠标滑过显示 -->
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.F_Status">{{
                                    scope.row.F_Status
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="F_ProjectName" label="项目名称">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.F_ProjectName">{{
                                    scope.row.F_ProjectName
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="F_PierCount" label="墩台个数" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.F_PierCount">{{
                                    scope.row.F_PierCount
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="F_FoundationCount" align="center" label="基桩数量" width="80">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.F_FoundationCount">{{
                                    scope.row.F_FoundationCount
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkedCount" align="center" label="已检基桩" width="80">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.checkedCount">{{
                                    scope.row.checkedCount
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rate" label="完成率%" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.rate">{{
                                    scope.row.rate
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="FirstClasscount" label="I类" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.FirstClasscount">{{
                                    scope.row.FirstClasscount
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="firstRate" label="I类占比" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.firstRate">{{
                                    scope.row.firstRate
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="SecondClasscount" label="II类" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.SecondClasscount">{{
                                    scope.row.SecondClasscount
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="secondRate" label="II类占比" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.secondRate">{{
                                    scope.row.secondRate
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ThirdClasscount" label="III类" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.ThirdClasscount">{{
                                    scope.row.ThirdClasscount
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="thirdRate" label="III类占比" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.thirdRate">{{
                                    scope.row.thirdRate
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="FourthClasscount" label="IV类" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.FourthClasscount">{{
                                    scope.row.FourthClasscount
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fourthRate" label="IV类占比" width="80" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.fourthRate">{{
                                    scope.row.fourthRate
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CheckStartDates" label="检测开始时间" width="120" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.CheckStartDates">{{
                                    scope.row.CheckStartDates
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CheckEndingDates" label="检测结束时间" width="120" align="center">
                        <template slot-scope="scope">
                            <div class="lineBoxhidden">
                                <a href="javascript:;" :title="scope.row.CheckEndingDates">{{
                                    scope.row.CheckEndingDates
                                }}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <template slot="empty">
                        <img style="width: 285px; height: 208px" src="@/assets/img/undata.png" alt="" />
                        <div class="pageFlagText">暂时没有数据哦！</div>
                    </template>
                </el-table>
                <div class="block" v-if="navigatepageNums > 1">
                    <div class="paginationInfo">
                        检索到{{ queryCriteriaData.total }} 条记录 | 显示第
                        <span v-if="getList.page == 1">{{ getList.page }}</span><span v-else>{{ 20 * (getList.page - 1)
                        }}</span> -
                        <!-- {{ 20 * getList.page }} 条记录 -->
                        <span v-if="queryCriteriaData.pages == queryCriteriaData.lastPage"> {{
                            queryCriteriaData.total }}</span>
                        <span v-else> {{ 20 * getList.page }} </span>
                        条记录
                    </div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="getList.page" :page-size="getList.pageSize" layout="prev, pager, next, jumper"
                        :total="queryCriteriaData.total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    getInfoByProject, // 基桩检测统计按建设项目/施工单位/工程名称统计
    // 基桩检测统计获取项目名称
    getProjectIdAndName,
    // 基桩检测统计获取施工单位名称
    getCompanyIdAndName,
} from "@/api/request.js";
export default {
    name: "Home",
    data() {
        return {
            names: "building",
            lr_look: null,
            projectList: [],
            Checktype: [
                {
                    fItemName: "==请选择==",
                    fItemValue: "==请选择==",
                },
                {
                    fItemName: "未开始",
                    fItemValue: "未开始",
                },
                {
                    fItemName: "检测中",
                    fItemValue: "检测中",
                },
                {
                    fItemName: "已结束",
                    fItemValue: "已结束",
                },
            ], //检测状态：- 根据当前登录用户获取检测类型
            companyList: [], //检测状态：
            companyName: null,
            projectName: null,
            // 列表
            getList: {
                fDepartmentid: "", // 项目id
                fCompanyid: "", // 施工单位id
                keyWord: "", // 检测状态
                modelType: "0", // 0-按建设项目   1-按施工单位   2-按工程项目
                page: 1,
                pageSize: 20,
                fUserid: "",
                companyid: "",
            },
            navigatepageNums: null, //是否显示分页
            queryCriteriaData: {},
            formData: {},
            fId: null, //当前数据fId
            loading: false,
            // 类表数据
            tableData: [],
        };
    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo"));
        this.getList.fUserid = this.userInfo.userId;
        this.getList.companyid = this.userInfo.companyId;
        this.getDataList(this.getList);
        // 项目名称数据
        this.getProjectIdAndName();
        this.btnRole(this.names);
    },
    methods: {
        // 按钮权限
        btnRole(name) {
            var btnList = [];
            var ModuleList = JSON.parse(sessionStorage.getItem("GxEmbedded_ModuleList"));
            if (ModuleList.length > 0) {
                ModuleList.map((item) => {
                    if (item.fEncode == name) {
                        btnList = item.modulebuttonList;
                    }
                });
                var btnStr = [];
                btnList.map((item) => {
                    btnStr.push(item.fEncode);
                });
                this.lr_look = btnStr.includes("lr_look");
            } else {
                this.lr_look = true;
            }
        },
        // 页面切换
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.getList.page = val;
            this.getDataList(this.getList);
        },
        // 检测状态
        selectJudgetype(e) {

            if (e.fItemName == "==请选择==") {
                this.getList.keyWord = '';
            } else {
                this.getList.keyWord = e.fItemName;
            }
            this.getDataList(this.getList);
        },
        // 选择项目名称
        selectCompany(e) {
            this.companyName = e.F_ProjectName;
            this.getList.fDepartmentid = e.F_ProjectId;
            this.projectName = "";
            this.getList.fCompanyid = "";
            // 调用施工单位数据
            this.getCompanyIdAndName(e.F_ProjectId);

            this.getDataList(this.getList);
        },
        // 选择施工单位
        selectProject(e) {
            console.log(e);
            this.projectName = e.F_CompanyName;
            this.getList.fCompanyid = e.F_CompanyId;
            this.getDataList(this.getList);
        },
        // 项目名称数据
        getProjectIdAndName() {
            getProjectIdAndName({})
                .then((res) => {
                    if (res.errcode == 0) {
                        var arr = [
                            {
                                F_ProjectId: "",
                                F_ProjectName: "请选择",
                            },
                        ];
                        this.companyList = arr.concat(res.data.projectList);
                    } else {
                        this.$message.error("项目名称", res.msg);
                        return false;
                    }
                })
                .catch(() => {
                    console.log("项目名称获取失败");
                    return false;
                });
        },
        // 施工单位数据来源
        getCompanyIdAndName(id) {
            getCompanyIdAndName({ projectId: id })
                .then((res) => {
                    if (res.errcode == 0) {
                        this.projectList = res.data.companyList;
                    } else {
                        this.$message.error("施工单位", res.msg);
                        return false;
                    }
                })
                .catch(() => {
                    console.log("施工单位获取失败");
                    return false;
                });
        },

        // 点击当前行变色
        rowChange(val) {
            this.currentRow = val;
        },

        // 获取列表数据
        getDataList(data) {
            this.loading = true;
            var that = this;
            getInfoByProject(data)
                .then((res) => {
                    if (res.errcode == 0) {
                        that.loading = false;
                        that.tableData = res.data.pageInfo.list;

                        this.queryCriteriaData = res.data.pageInfo;
                        this.navigatepageNums =
                            this.queryCriteriaData.navigatepageNums.length;
                    } else {
                        this.loading = false;
                        this.$message.error("列表数据", res.msg);
                    }
                })
                .catch((err) => {
                    console.log("列表接口", err);
                    this.loading = false;
                });
        },
    },
};
</script>
<style scoped>
.printTables {
    background: #fff;
    display: flex;
    justify-content: end;
    padding: 5px;
    margin-top: 10px;
}

.dialogBody {
    padding: 3px 20px;
    height: 80%;
    overflow-y: auto;
}
</style>